<!--
 * relative     : \src\components\topMenu.vue
 * Author       : 郭鹏超
 * Date         : 2024-09-26 16:28
 * LastEditors  : 郭鹏超
 * LastEditTime : 2025-02-25 09:08
 * Description  : 
 * CodeIterationRecord: 
 -->
<template>
  <base-layout v-if="routerStore?.currentTopMeneRouters?.length">
    <template #header>
      <el-tabs v-model="routerStore.currRouter.path" @tab-click="changeMenu">
        <template v-for="(router, index) in routerStore.currentTopMeneRouters" :key="index">
          <el-tab-pane :label="router.title" :name="router.path"></el-tab-pane>
        </template>
      </el-tabs>
    </template>
    <div class="h-100%" v-if="!hiddenComponent">
      <transition-router-view />
    </div>
  </base-layout>
</template>

<script lang="ts" setup>
const { routeQuery } = defineProps({
  routeQuery: {
    type: Object as <T>() => T,
    default: () => {
      return {};
    }
  },
  /**
   * @description: 是否隐藏整个组件
   */
  hiddenComponent: {
    type: Boolean,
    default: false
  }
});
const { routerStore } = useStore();
onMounted(() => {
  if (
    routerStore.currentTopMeneRouters?.length &&
    !routerStore.currentTopMeneRouters.some((item: any) => routerStore.currRouter.path == item.path)
  ) {
    router.push(routerStore.currentTopMeneRouters[0].path);
  }
});
const emits = defineEmits(["changeMenu"]);
const router = useRouter();
/**
 * @description: 顶部路由切换事件
 * @param tab
 * @return
 */
const changeMenu = (tab: any) => {
  emits("changeMenu", tab);
  router.push({ path: tab.paneName, query: routeQuery });
};
</script>
